<template>
  <div class="app-container">
    <div class="form-container">
      <div class="form-item">
        <div class="form-label">默认密码(password)</div>
        <div class="form-content">
          <el-input v-model="defaultPassword" placeholder="请输入默认密码"></el-input>
          <div class="form-tip">提示：系统新建用户时的默认默认密码</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">强制用户修改默认密码</div>
        <div class="form-content">
          <el-select v-model="forceChangePassword" placeholder="请选择">
            <el-option label="是" value="yes"></el-option>
            <el-option label="否" value="no"></el-option>
          </el-select>
          <div class="form-tip">提示：用户使用默认密码登录系统后，将会被强行要求更换成新密码</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">密码允许连续错次数</div>
        <div class="form-content">
          <el-input v-model="maxErrorCount" placeholder="请输入次数"></el-input>
          <div class="form-tip">提示：密码输入超过指定次数以后用户会被锁定，需要管理员手动解锁</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">密码安全策略</div>
        <div class="form-content">
          <div class="password-policy">
            <el-input v-model="minLength" placeholder="最小长度" class="min-length-input"></el-input>
            <span class="policy-text">位以上</span>
            <el-select v-model="complexity" placeholder="请选择复杂度" class="complexity-select">
              <el-option label="复杂（数字+大小写字母+特殊字符）" value="complex"></el-option>
              <el-option label="中等（数字+字母）" value="medium"></el-option>
              <el-option label="简单（任意字符）" value="simple"></el-option>
            </el-select>
          </div>
          <div class="form-tip">提示：用户设置新密码时的最小长度和复杂度规则</div>
        </div>
      </div>
      
      <div class="form-item">
        <div class="form-label">强制启用密码安全策略</div>
        <div class="form-content">
          <el-radio-group v-model="enforcePolicy">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
          <div class="form-tip">提示：启用密码安全策略后，系统将校验是否符合密码安全策略，如不满足则提示用户进行修改密码</div>
        </div>
      </div>
      
      <!-- 添加保存按钮 -->
      <div class="form-item">
        <div class="form-label"></div>
        <div class="form-content">
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const defaultPassword = ref('123456')
const forceChangePassword = ref('no')
const maxErrorCount = ref('50')
const minLength = ref('10')
const complexity = ref('complex')
const enforcePolicy = ref(true)

// 添加保存设置方法
const saveSettings = () => {
  // 这里添加保存逻辑，例如调用API
  ElMessage.success('密码策略设置保存成功')
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 80px 120px;
  background-color: #fff;
}

.form-container {
  max-width: 1000px;
}

.form-item {
  display: flex;
  margin-bottom: 24px;
  
  .form-label {
    width: 180px;
    line-height: 32px;
    text-align: right;
    padding-right: 12px;
    color: #606266;
  }
  
  .form-content {
    flex: 1;
    max-width: 800px;
  }
  
  .form-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
  }
}

.password-policy {
  display: flex;
  align-items: center;
  
  .min-length-input {
    width: 80px;
  }
  
  .policy-text {
    margin: 0 10px;
    color: #606266;
  }
  
  .complexity-select {
    flex: 1;
  }
}
</style>